import React from 'react';
import { inject, observer } from 'mobx-react';

import E9ToolBar from './E9ToolBar';
import E9ToolBarMore from './E9ToolBarMore';
import E9Account from './E9Account';

@inject('portalThemeStore')
@observer
class E9HeaderRight extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { portalThemeStore } = this.props;
    const { pluginReload } = portalThemeStore;
    if (pluginReload) {
      portalThemeStore.getPlugins();
    }
  }

  componentDidUpdate() {
    const logo = $('.e9header-left').width();
    const rleft = $('.e9header-right-menu').width();
    const rright = $('.e9header-right-toolbar').width();
    const topswitch = $('.e9header-switch').width();
    const wid = logo + rleft + rright + topswitch + 30;
    $('.e9theme-layout-container').css({ 'min-width': `${wid}px` });
    $('.e9theme-layout2-container').css({ 'min-width': `${wid}px` });
    $('.e9theme-layout3-container').css({ 'min-width': `${wid}px` });
    $('.e9theme-layout4-container').css({ 'min-width': `${wid}px` });

    const desklogo = $('.e9header-top-logo').width();
    const deskrleft = $('.e9header-home').width() + $('.e9header-quick-search').width() + 10;
    const deskrright = $('.e9header-right-toolbar').width();
    const deskwid = desklogo + deskrleft + deskrright + 50;
    $('.e9layout-desktop-container').css({ 'min-width': `${deskwid}px` });
  }

  render() {
    const { portalThemeStore } = this.props;
    const { pluginIds = [], pluginInsertCount } = portalThemeStore;

    return (
      <div className="e9header-right-toolbar">
        {pluginIds.map((item, index) => (
          <div key={index} id={item} className="e9header-toolbar-plugin" />
        ))}
        {pluginInsertCount > 0 ? <div className="e9header-toolbar-splitter" /> : null}
        <E9ToolBar ecId={`${(this && this.props && this.props.ecId) || ''}_E9ToolBar@01f1fd`} />
        <E9ToolBarMore ecId={`${(this && this.props && this.props.ecId) || ''}_E9ToolBarMore@ttvfxh`} />
        <div className="e9header-toolbar-splitter" />
        <E9Account ecId={`${(this && this.props && this.props.ecId) || ''}_E9Account@9ay0hn`} />
      </div>
    );
  }
}

export default E9HeaderRight;
